import React, { Component } from 'react'
import { Container, Left, Right, Content, Text, Root, Toast } from 'native-base'
import { View, TouchableOpacity, StyleSheet, Platform, DeviceEventEmitter } from 'react-native'
import { Actions } from 'react-native-router-flux'

import HeaderWhite from '../../../components/header/headerWhite'
import Forbiduser from '../../../components/forbiduser'
import Iconfont from '../../../components/iconfont'
import commonStyle from '../../../libs/commonStyle'
import * as loginAction from '../../../redux/actions/login'
import { connect } from 'react-redux' // 引入connect函数
import { list, getUpdateVersion } from './data'

const appType = {
	'android': 1,
	'ios': 2
}

class SettingsIndex extends Component {
	componentWillMount() {
		DeviceEventEmitter.addListener('forbid.user', () => {
			global.Pop.show(<Forbiduser wechat={this.props.serviceInfo.wechat} />,{animationType: 'slide-up'})
		})
	}
  async _onItemPress (item) {
    if (item.action) {
      Actions[item.action]()
    } else {
      switch (item.type) {
        case 3:
          await global.storage.remove({
            key: 'LOGINTOKEN'
          })
          this.showMessage('清除成功')
          break
        case 4:
          // 退出登录
          this.props.onLogout && this.props.onLogout()
					setTimeout(() => {
							this.props.getHomeData && this.props.getHomeData()
							Actions.pop()
					}, 1000)
          break
				case 5:
				  // 检查更新
				  // this.onHanderUpdate()
				  break
      }
    }
  }
  showMessage (text) {
    Toast.show({
      text: text,
      textStyle: {
        textAlign: 'center'
      },
      duration: 1000
    })
  }
	async autoCheckHardUpdate () {
		let data = await getUpdateVersion(appType[Platform.OS])
		return data
	}
	renderItem (item) {
		return (
			<View key={item.title}>
			  <TouchableOpacity
			    onPress={() => {
			      this._onItemPress(item)
			    }}
			    style={[
						styles.item,
			      commonStyle.h100,
			      commonStyle.pl20,
			      commonStyle.pr20,
			      commonStyle.borderBottom,
			      item.last && commonStyle.mb20
			    ]}
			  >
			    <Left>
			      <Text>{item.title}</Text>
			    </Left>
			    <Right>
						<View style={[commonStyle.flexCenter, commonStyle.flexRow]}>
							<Text style={[commonStyle.f28, commonStyle.colorGray1]}>{item.tips}</Text>
							<Iconfont
							  name='right_line'
							  style={[commonStyle.pl20, commonStyle.f36]}
							/>
						</View>
			    </Right>
			  </TouchableOpacity>
			</View>
		)
	}
  render () {
    return (
      <Root>
        <Container style={{ backgroundColor: '#f5f5f5' }}>
          <Content>
            <HeaderWhite title='设置' hasLeft />
            {list.map(item => {
// 							if (item.type === 5) {
// 								return this.renderUpdateVersion(item)
// 							}
              return this.renderItem(item)
            })}
          </Content>
        </Container>
      </Root>
    )
  }
}

const styles = StyleSheet.create({
	item: {
		backgroundColor: '#fff',
		flexDirection: 'row',
		justifyContent: 'center',
		alignItems: 'center'
	}
})

export default connect(
  state => ({
    loginInfo: state.login,
		serviceInfo: state.login.serviceInfo
  }),
  dispatch => ({
    onLogout: () => dispatch(loginAction.logout()),
		getHomeData: () => dispatch(loginAction.getHomeData())
  })
)(SettingsIndex)
